<template>
  <div>
    <u-popup closeable v-model="show" mode="bottom" border-radius="14">
      <div class="publish-popup">
        <div class="publish-item" @click="toPage('/pages/publish/play')">
          <image class="publish-icon" src="@/static/yu2.png"></image>
          <div class="publish-desc">
            <div class="publish-name">一起玩</div>
            <div class="publish-sub">独乐乐，不如众乐乐~</div>
          </div>
        </div>
        <div class="publish-item" @click="toPage('/pages/publish/cost')">
          <image class="publish-icon" src="@/static/qianbao2.png"></image>
          <div class="publish-desc">
            <div class="publish-name">加花费</div>
            <div class="publish-sub">钓不到鱼，那就买买买~</div>
          </div>
        </div>
        <div class="publish-item" @click="toPage('/pages/publish/gui')">
          <image class="publish-icon" src="@/static/gui.png"></image>
          <div class="publish-desc">
            <div class="publish-name">记打龟</div>
            <div class="publish-sub">别灰心，下次一定上鱼~</div>
          </div>
        </div>
        <div class="publish-item" @click="toPage('/pages/publish/fish')">
          <image class="publish-icon" src="@/static/yu3.png"></image>
          <div class="publish-desc">
            <div class="publish-name">添鱼获</div>
            <div class="publish-sub">真棒，这次又爆扣了~</div>
          </div>
        </div>
      </div>
    </u-popup>
    <u-tabbar height="100rpx" @change="change" v-model="pageIndex" :list="tabbarList" :mid-button="true" active-color="rgb(254, 129, 5)"></u-tabbar>
  </div>
</template>
<script>
  export default {
    props: {
      current: {
        type: Number,
        default: 0
      }
    },
    created() {
      this.pageIndex = this.current
    },
    data() {
      return {
        show: false,
        // 底部tabbar菜单数据
        tabbarList: [
          {
            path: "/pages/index/index",
            iconPath: "home",
            selectedIconPath: "home-fill",
            text: '首页',
            isDot: false,
            customIcon: false,
          },
          {
            path: "/pages/rank/rank",
            iconPath: "photo",
            selectedIconPath: "photo-fill",
            text: '榜单',
            customIcon: false,
          },
          {
            iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
            selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
            text: '发布',
            midButton: true,
            customIcon: false,
          },
          {
            path: '/pages/day/day',
            iconPath: "play-right",
            selectedIconPath: "play-right-fill",
            text: '考勤',
            customIcon: false,
          },
          {
            path: '/pages/my/my',
            iconPath: "account",
            selectedIconPath: "account-fill",
            text: '我的',
            isDot: false,
            customIcon: false,
          },

        ],
        pageIndex: 0
      }
    },
    methods: {
      change(e) {
        if (e === 2) {
          this.show = true
        } else {
          this.pageIndex = e
          uni.switchTab({
            url: this.tabbarList[e].path
          })
        }
      },
      toPage(url) {
        uni.navigateTo({
          url
        })
      }
    }
  }
  </script>
<style lang="scss">
.publish-popup {
  padding: 40rpx;
  padding-top: 100rpx;
  padding-bottom: 100rpx;
  .publish-item {
    height: 110rpx;
    display: flex;
    align-items: center;
    padding: 20rpx 10rpx;
    border-radius: 24rpx;
    margin-bottom: 20rpx;
    .publish-icon {
      width: 60rpx;
      height: 60rpx;
      margin-right: 20rpx;
      margin-left: 20rpx;
    }
    .publish-desc {
      height: 100%;
      .publish-name {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
      .publish-sub {
        font-size: 24rpx;
        color: #333;
        margin-top: 10rpx;
      }
    }
  }
  .publish-item:nth-of-type(1) {
    background-color: rgb(255,244,211);
  }
  .publish-item:nth-of-type(2) {
    background-color: rgb(200,229,255);
  }
  .publish-item:nth-of-type(3) {
    background-color: rgb(212,239,217);
  }
  .publish-item:nth-of-type(4) {
    background-color: rgb(255,227,206);
  }
}
</style>
